<template>
	<view class="smart-page">
		<view class="smart-page-head">
			<view class="smart-page-head-title">slider滑块</view>
		</view>

		<view>显示当前view</view>
		<view>
			<slider value="20" show-value="true" @change="sliderChange"></slider>
		</view>
		<view>设置步长step</view>
		<view>
			<slider value="20" show-value="true" @change="sliderChange" step="5"></slider>
		</view>
		<view>设置最大值、最小值</view>
		<view>
			<slider value="100" min="50" max="500" show-value="true"></slider>
		</view>
		<view>设置颜色</view>
		<view>
			<slider activeColor="#4CD964" backgroundColor="#AA8000" block-color="#FBAD4E" block-size="15">
			</slider>
		</view>



	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 改变当前slider的值,触发函数
			sliderChange(e){
				console.log("当前value的值："+e.detail.value);
			}
		}
	}
</script>

<style>

</style>